<!--
 * @Descripttion: 
 * @Author: 银河以北
 * @Date: 2023-05-25 14:14:18
 * @LastEditors: 银河以北
 * @LastEditTime: 2024-08-28 09:30:45
-->
<template>
    <div class="code-header w-full flex justify-between items-stretch">
        <!-- mac 样式 -->
        <div class="mac-style px-[12px] flex" v-show="codeStyle=='MacOs'">
            <div class="mac-item bg-[#ff5f56]"></div>
            <div class="mac-item bg-[#ffbd2e]"></div>
            <div class="mac-item bg-[#27c93f]"></div>
        </div>
        <!-- title -->
        <div class="title grow px-[12px] text-lime-50" v-show="codeShowTitle">
            <div class="title-input w-full" contenteditable="true" spellCheck="false" v-bind:value="titleText"
                @input="changeTitle">{{ titleText }}</div>

        </div>
        <!-- window 样式 -->
        <div class="window-style relative flex" v-show="codeStyle=='Windows'">
            <div class="exit "></div>
            <div class="minimize "></div>
            <div class="maximize w-[12px]"></div>
        </div>

    </div>
</template>

<script setup>
    // el 图标
    import {
        Minus
    } from '@element-plus/icons-vue'
    import {
        ref,
        computed
    } from 'vue'
    // 接收传值
    const props = defineProps({
        button: {
            type: Boolean,
            default: true,
        },
        title: {
            type: Boolean,
            default: true
        },
        titleText: {
            type: String,
            default: "Title"
        },
        style: {
            type: String,
            default: "MacOs"
        },
    })

    // 样式
    const codeStyle = computed(() => props.style)
    const codeShowButton = computed(() => props.button)
    const codeShowTitle = computed(() => props.title)

    const emit = defineEmits(['changeTitleText'])
    const changeTitle = (event) => {
        emit('changeTitleText', event.target.innerText)
        // title.value = event.target.innerText;
    }
</script>

<style lang="scss" scoped>
    .mac-item {
        height: 12px;
        width: 12px;
        border-radius: 50%;
        margin-right: 6px;
    }

    .title-input {
        text-align: center;
        color: rgb(207, 210, 209);
        text-align: center;
        font-size: 16px;
        background: none;
        outline: none;
        border: none;
        text-indent: -60px;
    }

    .exit {
        background-color: transparent;
        box-shadow: none;
        border-bottom: 2px solid #cfd2d1;
        width: 14px;
        position: relative;
        top: -14px;
        margin-right: 28px
    }

    .minimize {
        background-color: transparent;
        box-shadow: none;
        border: 2px solid #cfd2d1;
        width: 14px;
        height: 14px;
        top: 0;
        margin-right: 28px
    }


    .maximize::after {
        content: "";
        display: inline-block;
        border-right: 2px solid #cfd2d1;
        height: 18px;
        transform: rotate(-45deg);
        position: relative;
        top: -2px;
        left: 1px;
    }

    .maximize::before {
        content: " ";
        display: inline-block;
        border-left: 2px solid #cfd2d1;
        height: 18px;
        transform: rotate(45deg);
        left: 2px;
        top: -2px;
        position: relative;

    }
</style>